<!DOCTYPE html>
<html>

<head>
  <title>Cheetah</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <style>
      .container{
        width: 800px;
        margin: auto;
        padding: auto;
      }
      .search-box{
        width: 500px;
      }
      #search-field{
        width: 100%;
        font-size: 1.5em;
      }
      #search-list{
        width:100%;
        padding-bottom: 10px;
      }
      .selected{
        background: #ccc;
      }
      .result-item{
        margin-top: 5px;
      }
      .encode_path,.ftype{
        display: none;
      }
      .fname{
        font-size: 1.3em;
      }
      .fpath{
        font-size: 0.5em;
        color: #888;
      }
  </style>
</head>

<body>
  <div class="container">
    <h1>Cheetah</h1>
    <div class="search-box">
      <input type="text" id="search-field" autocomplete="off" name="keyword" />
    </div>
    <div class="search-box">
      <div id="search-list"></div>
    </div>
  </div>

  <script src="/javascripts/jquery-3.1.1.min.js"></script>
  <script>

    $(function () {
      var is_enter=function(event){
        return event.which===13;
      }

      var is_up=function(event){
        return event.which===38;
      }

      var is_down=function(event){
        return event.which===40;
      }

      var is_blank_ch=function(ch){
        if(!ch){
          return true;
        }

        if($.trim(ch)===""){
          return true;
        }

        return false;
      }

      $("#search-field").keyup(function (e) {
        if(is_enter(e)||is_up(e)||is_down(e)){
          return;
        }
        var keyword = this.value;

        if(is_blank_ch(keyword)){
          $("#search-list").css({border:"0px"}).html("");
          return;
        }

        if(keyword.startsWith("in ")){
          return;
        }

        $.ajax({
          url: "/",
          type: "POST",
          data: {
            keyword: keyword
          },
          success: function (data) {
            var h = "";
            for (var i in data) {
              var d=data[i];
              var class_name;
              if(i==='0'){
                class_name="selected result-item";
              }else{
                class_name="result-item";
              }
              h += `<div class='${class_name}'>
              <div class='fname'>${d.fname}</div>
              <div class='fpath'>${d.fpath}</div>
              <div class='encode_path'>${d.encode_path}</div>
              <div class='ftype'>${d.ftype}</div>
              </div>`;
            }
            $("#search-list").css({
              border:"1px solid"
            }).html(h);
            $(".result-item").bind('mousemove', function () {
              select_element(this);
            }).bind('click',handle_enter);
          }
        });

      });

      var handle_enter = function () {
        var path = $('.selected > .encode_path').text();
        var type= $('.selected > .ftype').text();
        if (path) {
          $.ajax({
            url: "cmd",
            type: "POST",
            data: {
              fpath: path,
              ftype:type
            },
            success: function (data) {
              if (data.code !== 1) {
                alert(data.msg);
              }
            }
          });
        }
      };

      var check_selected = function () {
        var items = $(".result-item");
        for (var i in items) {
          if ($(items[i]).hasClass('selected')) {
            return {
              pos: parseInt(i),
              len: items.length
            };
          }
        }
        throw new Error("illegal pos");
      };

      var select = function (pos) {
        $('.result-item').removeClass('selected');
        var item = $('.result-item')[pos];
        $(item).addClass('selected');
      };

      var select_element=function(e){
        $('.result-item').removeClass("selected");
        $(e).addClass('selected');
      };

      var handle_up = function () {
        if (len === 0 || len === 1) {
          return;
        }

        var rs = check_selected();
        var pos = rs.pos;
        var len = rs.len;

        if (pos === 0) {
          pos = len - 1;
        } else {
          pos--;
        }

        select(pos);
      };

      var handle_down = function () {
        if (len === 0 || len === 1) {
          return;
        }

        var rs = check_selected();
        var pos = rs.pos;
        var len = rs.len;

        if (pos === len - 1) {
          pos = 0;
        } else {
          pos++;
        }

        select(pos);
      };

      $(document).keydown(function (e) {
        if (is_enter(e)) {
          handle_enter();
        } else if (is_up(e)) {
          handle_up();
        } else if (is_down(e)) {
          handle_down();
        }
      });

    });

  </script>
</body>

</html>
